<template>
  <AplidCharts type="bar" :option="options"></AplidCharts>
</template>

<script setup lang="ts">
import AplidCharts from "@/components/AplidCharts/index.vue";
import icon11 from "@/assets/imgs/icon-hom1/icon-11.webp";
type Props = {
  option?:any
  xData?:any
  numData?:any
};
const props = withDefaults(defineProps<Props>(), {
  option: [],
  xData:[],
  numData:[]
});

  let options = {
    tooltip: {
      trigger: "item",
      backgroundColor: '#040b15',
      borderColor: "#159AFF",
      padding: [5, 10],
      textStyle: {
        color: "rgba(255, 255, 255, 0.65)",
        fontSize: 14,
      },
      position: function (point, params, dom, rect, size) {
        var x = point[0]-60;
        var y = size.viewSize[1] - rect.height - 80
        return [x, y];
      },
      formatter: function (params) {
        if(params.name=='已申请') {
          return params.name + "<span style='margin-left:20px'>50%</span>"
        } else if(params.name=='可提供服务') {
          return params.name + "<span style='margin-left:20px'>37%</span>"
        } else if(params.name=='待审核') {
          return params.name + "<span style='margin-left:20px'>10%</span>"
        } else if(params.name=='公安审核未通过') {
          return params.name + "<span style='margin-left:20px'>3%</span>"
        }
      }
    },
    grid: {
      left: 15,
      right: 15,
      bottom: 0,
      // 是否包含文本
      containLabel: true,
    },
    legend: {
      textStyle: {
        color: "rgba(255, 255, 255, 0.65)",
      },
      itemWidth: 10,
      itemHeight: 10,
    },
    xAxis: [
      {
        type: "category",
        axisPointer: {
          type: "shadow",
        },
        axisTick: {
          show: false,
        },
        axisLabel: {
          interval: 0,
          textStyle: {
            color: "#fff", //底部文字颜色
            fontSize: 12,
          },
        },
        data:props.xData
      },
    ],
    yAxis: [
      {
        type: "value",
        nameTextStyle: {
          color: "#fff",
        },
        axisLabel: {
          formatter: "{value}",
          color: "#fff", // y 轴标注颜色
        },
        splitLine: {
          lineStyle: {
            type: "dashed", // 虚线
            color: "rgba(255, 255, 255, 0.15)",
          },
          show: true,
        },
      },
    ],
    series: [
      {
        type: "bar",
        label: {
          normal: {
            show: true,//开启显示
            position: 'top',//柱形上方
            textStyle: { //数值样式
              color: '#fff'
            }
          }
        },
        itemStyle: {
          barBorderRadius: [30, 30, 0, 0],
          color: {
            type: "linear",
            x: 0, // 右
            y: 0, // 下
            x2: 0, // 左
            y2: 1, // 上
            colorStops: [
              {
                offset: 0,
                color: "rgba(74, 181, 238, 1)", // 0% 处的颜色
              },
              {
                offset: 1,
                color: "rgba(12, 43, 68, 1)", // 100% 处的颜色
              },
            ],
          },
        },
        barWidth: 8,
        yAxisIndex: 0,
        data:props.numData
      },
      {
        z: 99,
        type: "scatter",
        symbolOffset: ["0%", "-5%"],
        symbolSize: 40,
        symbol: `image://${icon11}`,
        itemStyle: {
          borderWidth: 0,
          opacity: 1,
          color: "#000",
        },
        data:props.numData
      },
    ],
  };
</script>
<style scoped lang="scss"></style>
